@use './global.scss' as vars;

.wd {
    @for $i from 0 through vars.$css-num {
        &-#{$i} {
            width: #{$i}#{vars.$cm-unit};
        }
    }

    @for $i from 0 through 100 {
        &-pt-#{$i} {
            width: #{$i}#{vars.$pt-unit};
        }
    }

    @for $i from 1 through 100 {
        &-vw-#{$i} {
            width: #{$i}vw;
        }
    }
}

.mx-wd {
    @for $i from 1 through vars.$css-num {
        &-#{$i} {
            max-width: #{$i}#{vars.$cm-unit};
        }
    }
}

.mm-wd {
    @for $i from 1 through vars.$css-num {
        &-#{$i} {
            min-width: #{$i}#{vars.$cm-unit};
        }
    }
}

.ht {
    @for $i from 1 through vars.$css-num {
        &-#{$i} {
            height: #{$i}#{vars.$cm-unit};
        }
    }

    @for $i from 0 through 100 {
        &-pt-#{$i} {
            height: #{$i}#{vars.$pt-unit};
        }
    }

    @for $i from 1 through 100 {
        &-vh-#{$i} {
            height: #{$i}vh;
        }
    }
}

.mx-ht {
    @for $i from 1 through vars.$css-num {
        &-#{$i} {
            max-height: #{$i}#{vars.$cm-unit};
        }
    }
}

.mm-ht {
    @for $i from 1 through vars.$css-num {
        &-#{$i} {
            max-height: #{$i}#{vars.$cm-unit};
        }
    }
}

.lh {
    @for $i from 1 through vars.$css-lh-num {
        &-#{$i} {
            line-height: #{$i}#{vars.$cm-unit};
        }
    }
}

.pd {
    @for $i from 0 through vars.$css-ds-num {
        &-bt-#{$i} {
            padding-bottom: #{$i}#{vars.$cm-unit};
        }

        &-rt-#{$i} {
            padding-right: #{$i}#{vars.$cm-unit};
        }

        &-tp-#{$i} {
            padding-top: #{$i}#{vars.$cm-unit};
        }

        &-lt-#{$i} {
            padding-left: #{$i}#{vars.$cm-unit};
        }

        &-#{$i} {
            padding: #{$i}#{vars.$cm-unit};
        }
    }
}

.mg {
    @for $i from 0 through vars.$css-ds-num {
        &-bt-#{$i} {
            margin-bottom: #{$i}#{vars.$cm-unit};
        }

        &-rt-#{$i} {
            margin-right: #{$i}#{vars.$cm-unit};
        }

        &-tp-#{$i} {
            margin-top: #{$i}#{vars.$cm-unit};
        }

        &-lt-#{$i} {
            margin-left: #{$i}#{vars.$cm-unit};
        }

        &-bt--#{$i} {
            margin-bottom: -#{$i}#{vars.$cm-unit};
        }

        &-rt--#{$i} {
            margin-right: -#{$i}#{vars.$cm-unit};
        }

        &-tp--#{$i} {
            margin-top: -#{$i}#{vars.$cm-unit};
        }

        &-lt--#{$i} {
            margin-left: -#{$i}#{vars.$cm-unit};
        }

        &-#{$i} {
            margin: #{$i}#{vars.$cm-unit};
        }

        &-x-at {
            margin: 0 auto;
        }

        &-y-at {
            margin: auto 0;
        }

        &-at {
            margin: auto;
        }
    }
}

.zx {
    @for $i from 1 through vars.$css-zx-num {
        &-#{$i} {
            z-index: #{$i};
        }

        &--#{$i} {
            z-index: -#{$i};
        }
    }
}

.tx {
    &-ct {
        text-align: center;
    }

    &-np {
        white-space: nowrap;
    }

    &-lt {
        text-align: left;
    }

    &-rt {
        text-align: right;
    }
}

.ps {
    // 定义定位类型的类
    $positions: (
        rl: relative,
        fx: fixed,
        as: absolute
    );

    @for $i from 0 through vars.$css-num {
        &-tp--#{$i} {
            top: -#{$i}#{vars.$cm-unit};
        }

        &-lt--#{$i} {
            left: -#{$i}#{vars.$cm-unit};
        }

        &-rt--#{$i} {
            right: -#{$i}#{vars.$cm-unit};
        }

        &-bt--#{$i} {
            bottom: -#{$i}#{vars.$cm-unit};
        }

        &-lt-#{$i} {
            left: #{$i}#{vars.$cm-unit};
        }

        &-rt-#{$i} {
            right: #{$i}#{vars.$cm-unit};
        }

        &-bt-#{$i} {
            bottom: #{$i}#{vars.$cm-unit};
        }

        &-tp-#{$i} {
            top: #{$i}#{vars.$cm-unit};
        }
    }

    @each $key, $value in $positions {
        &-#{$key} {
            position: $value;
        }
    }
}

$weight-list: 400, 500, 600, 700, 800;

.fw {
    @each $key in $weight-list {
        &-#{$key} {
            font-weight: #{$key};
        }
    }
}

.ft {
    @for $i from 1 through 40 {
        &-#{$i} {
            font-size: #{$i}#{vars.$cm-unit};
        }
    }
}
